<template>
  <n-space class="bread_info" v-if="showBread && breadInfo.length > 1">
    <div v-for="(item, index) in breadInfo" :key="item.adcode" @click="breadClick(item, index)">
      <span class="name">{{ item.name }}</span>
      <span v-if="index < breadInfo.length - 1">/</span>
    </div>
  </n-space>
  <div :id="id" class="map_container" :class="[isHiddenMapBg ? 'hidden_map_bg' : '']"></div>
</template>

<script setup lang="ts">
import { MapOptions, BreadInfo, Bread, Point } from './types'
import { useAMap } from './hooks'
import { FeatureEvents } from './enum'

// 额外的传参，结合具体业务
type ExtractProps = {
  markers: Point[]
  heatMarkers: Array<Point & { count: number }>
  [propName: string]: any
}

const props = withDefaults(
  defineProps<{
    id?: string
    mapOptions?: MapOptions
    extractInfo?: ExtractProps
    hasMask?: boolean // 是否启用掩膜
    isHiddenMapBg?: boolean // 地图背景是否为透明
    showBread?: boolean // 是否展示面包屑
    isDown?: boolean // 是否允许下钻
    level?: string | null // 最大下钻层级, 在启用区划时起效  null | 'country' | 'province' | 'city' | 'district'
    bread?: BreadInfo // 地图将会展示该数组最后一项
    isShowDistrict?: boolean // 是否启用区划, 开启时绘制对应区划
    isReload?: boolean // 是否重新加载高德api
  }>(),
  {
    id: 'mapContainer',
    mapOptions: undefined,
    extractInfo: undefined,
    hasMask: false,
    isHiddenMapBg: false,
    showBread: true,
    isDown: true,
    level: 'district',
    bread: () => [{ name: '全国', value: '中国', adcode: 100000 }],
    isShowDistrict: true,
    isReload: false
  }
)

const breadInfo = ref<BreadInfo>([])
const { mapOptions, bread, isShowDistrict } = toRefs(props)
const {
  map,
  loca,
  districtExplorer,
  initAMap,
  creatMask,
  loadAreaNode,
  createMarker,
  createHeatMap,
  creatFlyLine
} = useAMap(props.id, mapOptions.value, bread.value[0].adcode, isShowDistrict.value)

// 添加地图监听事件
function addFeatureListener() {
  // 开启行政区域鼠标事件监听
  districtExplorer.value.on(FeatureEvents['featureClick'], function (e: any, feature: any) {
    const { level, hasMask } = props
    const {
      properties: { adcode, level: curLevel, name }
    } = feature
    console.log('点击: ', feature, e, curLevel, '---', level)
    if (level === curLevel) return

    breadInfo.value.push({
      name,
      value: name,
      adcode
    })
    loadAreaNode(adcode)
    if (hasMask) {
      console.log(name)
      creatMask(name)
    }
  })
}

// 面包屑切换
function breadClick(item: Bread, index: number) {
  if (index === breadInfo.value.length - 1) return
  breadInfo.value.splice(index + 1)
  const { hasMask } = props
  loadAreaNode(item.adcode)
  if (hasMask) {
    creatMask(item.value)
  }
}

// 根据业务需求，开启额外的地图功能
function openExtractFunction() {
  const { hasMask, isDown, bread, extractInfo } = props

  if (hasMask) {
    creatMask(bread[bread.length - 1].value)
  }
  if (isDown) {
    addFeatureListener()
  }

  // 根据extractInfo定义的变量扩展相应功能
  // 组件拿到项目中使用时，将示例拿出来直接到下面执行
  const extractInfoData = extractInfo as ExtractProps
  // 落点示例
  if (extractInfoData.markers?.length) {
    createMarker(extractInfoData.markers)
  }

  // 根据extractInfo定义的变量扩展相应功能
  // 热力图示例
  if (extractInfoData.heatMarkers?.length) {
    createHeatMap(extractInfoData.heatMarkers)
  }

  // 根据extractInfo定义的变量扩展相应功能
  // 飞线图、贴地点示例
  creatFlyLine()
}

onMounted(async () => {
  await initAMap(props.isReload)
  openExtractFunction()
})

// 标记示例
watch(
  () => (props.extractInfo as ExtractProps).markers,
  (val: Point[]) => {
    map.value && createMarker(val)
  }
)

// 热力图示例
watch(
  () => (props.extractInfo as ExtractProps).heatMarkers,
  (val: Array<Point & { count: number }>) => {
    loca.value && createHeatMap(val)
  }
)

// 初始化面包屑
watch(
  () => props.bread,
  (val: BreadInfo) => {
    breadInfo.value = val
  }
)
</script>

<style lang="less" scoped>
.map_container {
  width: 100%;
  height: 100%;
}

.hidden_map_bg {
  background-image: none !important;
  background-color: transparent !important;
}

.bread_info {
  position: relative;
  left: 0;
  top: 0;
  color: #fff;

  .name {
    cursor: pointer;
  }
}
</style>
